<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 父组件中渲染count -->
        <p @click="count++">父组件-count: {{count}}</p>
        <!-- 使用局部组件 -->
        <partchild id="100" :count1="count" :name-arr="nameArr" :fn="doubleCount"></partchild>
    </div>
</body>

</html>
<script>
    // 父传子: 
    // 通过动态属性在父组件中, 找到子组件,给子组件添加动态属性, 然后传值, 在子组件上通过props
    // 配置项接收父组件传递属性, 然后数据就直接挂载到了子组件的this 实例上, 这样就可以在子组件上使用了

    //特点: 可以传递任意参数,
    // 参数可以为: 字符串 数组. 对象,. 函数.....

    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                count: 0,
                nameArr: ['赵晗', '曹雅琪', '范昱']
            }
        },
        methods: {
            doubleCount() {
                this.count += 100
                return this.count * 10
            }
        },
        //  定义局部组件
        components: {
            partchild: {
                template: `<div>
                            <p>我是局部子组件--{{count1}}</p>
                            <ul>
                                <li v-for='(item,index) in nameArr' :key='index'>{{item}}</li>
                            </ul>
                            <!--  <p>方法: {{fn()}}</p>-->
                            <p @click='fn'>调用父组件传递过来的方法fn-方式1</p>
                            <p @click='myfn'>调用父组件传递过来的方法fn-方式2</p>
                          </div>`,
                props: ['count1', 'nameArr', 'fn'], // 定义接收的来自父组件的属性
                created() {
                    console.log('this', this);
                },
                methods: {
                    myfn() {
                        //调用父组件传递过来的方法
                        this.fn()
                    }
                }

            }
        }

    });

    //挂载根实例到根节点
    vm.mount('#app')

</script>